<template>
  <div class="data-resource">
    <a-tabs :defaultActiveKey="activeTab" @change="callback">
      <a-tab-pane tab="Tab 1" :key="1"></a-tab-pane>
      <a-tab-pane tab="Tab 2" :key="2"></a-tab-pane>
      <a-tab-pane tab="Tab 3" :key="3"></a-tab-pane>
    </a-tabs>
    <component :is="activeModual"></component>
  </div>
</template>

<script>
import dataRegInfo from "@/components/data-resource/law-reg-info.vue";
import dataPeopleInfo from "@/components/data-resource/law-people-info.vue";
export default {
  name: "home",
  data() {
    this.caseRegInfoData = {
      key: this.$tools.getId({ stamp: 0 }),
      regName: ""
    };
    return {
      activeTab: 1,
      activeModual: dataRegInfo,
      dataCaseRegInfoList: {
        data: [this.caseRegInfoData],
        alias: "1"
      },
      dataCasePeopleInfoList: {
        data: [this.caseRegInfoData],
        alias: "2"
      }
    };
  },

  methods: {
    callback(val) {
      switch (val.toString()) {
        case "1":
          this.activeModual = dataRegInfo;
          break;
        case "2":
          this.activeModual = dataPeopleInfo;
          break;
      }
      this.forceUpdate();
    },
    forceUpdate() {
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped></style>
